Information Design
Course Project
Team
Salathiel Wells- Project Lead, Visual Designer, Code Debugger
Taylor Wilkinson- Lead Developer
April Diaz- Information Designer
Brief
Design and code a fully responsive website using HTML + CSS based on data about retrofitting your home, retrieved from City Studio Vancouver
1 Explore the information architecture and interaction through sketches
Sketches with notes to explore both the desktop and mobile view of the website
2 Wireframe
First iteration of wireframes for the three layouts used throughout the website in various sections
My team and I found usability concerns when implementing the wireframe into code, particularly the length of time it took to get to information further buried in the site as the wireframe implemented a carousel format for maneuvering through the information. We therefore decided to redesign the website in having a full-page styled site so the user can more easily access the information once landing on the page
3 Visual Design
As the Lead Visual Designer I was responsible for developing the graphics, iconography, determining the colour palette and creating the visual layout for the website
L-R: Banner Image, Self-designed icons and button style
Typography and colour palette
The typeface, colours and icon designs were all created with the goal of creating a consistent flat design throughout the webpages. The Ubuntu typeface categorizes a contemporary style. The angled edges sans-serif style of the font ensure a friendly and inviting design. The white, light gray and blue colours were to reduce the colour palette to ensure consistency but to further accentuate a friendly design. Similarly the icon design utilized widely accepted metaphors to represent their respective elements and their single weight line style accentuate the same and ensure the icon emphasizes the subseqent information.
4 Final Design
Final Design of three pages whose layout and design were used throughout
The fInal result was an 11-page website that was fully responsive and utilized the visual design established by me throughout.
It was difficult defining the overall brand of the website as we wanted to diverge from the atypical green to represent the environment and focus more on the house aspect. However through several iterations we were able to achieve a satisfactor result. The coding of the website proved difficult in ensuring all elements were responsive as such ensuring relatively consistent layout as the page increases and decreases in size based on the user's name was challenging. It was beneficial though to have sketched and created Illustrator mockups to work towards for our final design.
